<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type='text/css'>
        html {
            font-family: Helvetica;
            color: #222;
        }

        h1 {
            color: steelblue;
            font-size: 24px;
            margin-top: 24px;
        }

        button {
            margin: 0 3px 10px;
            font-size: 12px;
        }

        .logLine {
            border-bottom: 1px solid #ccc;
            padding: 4px 2px;
            font-family: courier;
            font-size: 11px;
        }
    </style>
    <script src="./jsBridge.js"></script>
</head>

<body>

    <script>
        // window.onerror = function (err) {
        //     log('window.onerror: ' + err)
        // }
        // /*这段代码是固定的，必须要放到js中*/
        // function setupWebViewJavascriptBridge(callback) {
        //     //android使用
        //     if (window.WebViewJavascriptBridge) {
        //         callback(WebViewJavascriptBridge)
        //     } else {
        //         document.addEventListener(
        //             'WebViewJavascriptBridgeReady'
        //             , function() {
        //                 callback(WebViewJavascriptBridge)
        //             },
        //             false
        //         );
        //     }
        //     //ios使用
        //     if (window.WebViewJavascriptBridge) {
        //         return callback(WebViewJavascriptBridge);
        //     }
        //     if (window.WVJBCallbacks) {
        //         return window.WVJBCallbacks.push(callback);
        //     }
        //     window.WVJBCallbacks = [callback];
        //     var WVJBIframe = document.createElement('iframe');
        //     WVJBIframe.style.display = 'none';
        //     WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        //     document.documentElement.appendChild(WVJBIframe);
        //     setTimeout(function () {
        //         document.documentElement.removeChild(WVJBIframe)
        //     }, 0)
        // }
        // setupWebViewJavascriptBridge(function (bridge) {
            
        //     bridge.init(function(message, responseCallback) {
        //         // console.log('JS got a message', message);
        //         // var data = {
        //         //     'Javascript Responds': '测试中文!'
        //         // };

        //         // if (responseCallback) {
        //         //     console.log('JS responding with', data);
        //         //     responseCallback(data);
        //         // }
        //     });
        //     bridge.registerHandler('testJavascriptHandler', function (data, responseCallback) {
        //         log('ObjC called testJavascriptHandler with', data)
        //         var responseData = {
        //             'Javascript Says': 'Right back atcha!'
        //         }
        //         log('JS responding with', responseData)
        //         responseCallback(responseData)
        //     })
        //     document.getElementById('blogId').onclick = function (e) {
        //         log('js call objc: getWatchOpenInfo')
        //         bridge.callHandler('getWatchOpenInfo', null, function (response) {
        //             log('enter getWatchOpenInfo response')
        //             log('JS got response', response)
        //         });
        //     }
        //     document.getElementById('setPageBar').onclick = function (e) {
        //         log('js call objc: setPageBar')
        //         var param = {
        //             hidden: 0, // 1不显示标题文字（可以设置成空字符），0显示标题文字
        //             backstyle: 'white', // 返回按钮类型，white白，black黑
        //             bgcolor: 'white', // 导航栏背景颜色
        //             text: '666', // 文字
        //             color: 'black', // 文字颜色
        //             fullscreen: 0, // 全屏模式，不显示导航栏。1全屏，0不全屏
        //         }
        //         bridge.callHandler('setPageBar', param, function (response) {
        //             log('enter setPageBar response')
        //             log('JS got response', response)
        //         });
        //     }
        // })

        // function jsAsyncCallHandler(name, param) {
        //     return new Promise((reslove) => {
        //         setupWebViewJavascriptBridge(function (bridge) {
                    
        //             if (param) {
        //                 // 第二个参数为 函数时；
        //                 bridge.callHandler(name, param, function (response) {
        //                     log('JS got response', response)
        //                     reslove(response);
        //                 });
        //             } else {
        //                 bridge.callHandler(name, null,function (response) {
        //                     log('JS got response', response)
        //                     reslove(response);
        //                 });
        //             }
        //         });
        //     });
        // }
        function log(message, data) {
                        var log = document.getElementById('log')
                        var el = document.createElement('div')
                        el.className = 'logLine'
                        el.innerHTML =  message + ':<br/>' + data
                        if (log.children.length) {
                            log.insertBefore(el, log.children[0])
                        } else {
                            log.appendChild(el)
                        }
                    }
        // window.jsBridge = {
        //     getUserId: function () {
        //         return jsAsyncCallHandler('getWatchOpenInfo');
        //     },
        //     setBar: function (payload) {
        //         document.title = payload.title;
        //         var params = {
        //             hidden: 0, // 1不显示标题文字（可以设置成空字符），0显示标题文字
        //             backstyle: 'white', // 返回按钮类型，white白，black黑
        //             bgcolor: payload.bgColor, // 导航栏背景颜色
        //             text: payload.title, // 文字
        //             color: payload.txtColor, // 文字颜色
        //             fullscreen: 0, // 全屏模式，不显示导航栏。1全屏，0不全屏
        //         };
        //         return jsAsyncCallHandler('setPageBar', params);
        //     },
        // };

        function getWatchOpenInfo1() {
            try {
                jsBridge.getUserId().then(res => {
                    log('JS got response', res)
                }).catch(err=>{
                    log('JS got err', err)
                })
            } catch (error) {
                log('getUserId err', error)
            }
            
        }

        function setPageBar1() {
            var param = {
                bgColor: 'white',
                title: '456',
                txtColor: 'red'
            }
            try {
                jsBridge.setBar(param).then(res => {
                    log('JS got response', res)
                }).catch(err=>{
                    log('JS got err', err)
                })
            } catch (error) {
                log('getUserId err', error)
            }
            
        }
    </script>
    <div>
        <!-- <input type="button" value="getWatchOpenInfo" id="blogId" />
        <input type="button" value="setPageBar" id="setPageBar" /> <br> -->
        <input type="button" value="getWatchOpenInfo1" onclick="getWatchOpenInfo1()" />
        <input type="button" value="setPageBar1" onclick="setPageBar1()" />
    </div>
    <div id='log'></div>
</body>

</html>